
<template>
    <div class="createCluster" style="width: 30%;height:40%;padding: 10px;margin: 5px">
        <div class="content">
            <Form ref="clusterForm" :model="clusterForm" :rules="rules">
                <FormItem prop="cluster_name">
                    <span>集群名称</span>
                    <Input v-model="clusterForm.cluster_name" placeholder="k8s_cs1" />
                </FormItem>
                <FormItem >
                    <span>配置文件</span>
                    <!-- :format="['config']"   :on-format-error="handleFormatError"  :on-exceeded-size="handleMaxSize"-->
                    <Upload action="" :before-upload="handleUpload" :max-size="10" >
                        <Button icon="ios-cloud-upload-outline">选择文件上传</Button>
                    </Upload>
                    <div v-if="clusterForm.file !== null">Upload file: {{ clusterForm.file.name }}</div>
                </FormItem>                
                
                <FormItem  prop="cluster_type">
                    <Select v-model="clusterForm.cluster_type" style="width:200px">
                        <Option v-for="item in cluster_type_list" :value="item" :key="item">{{ item }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <Button @click="create_cluster('clusterForm')">创建</Button>
            <div v-if="file_path !== '' ">创建集群成功{{ file_path }}</div>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
import { cluster_create } from  '@/api'
const forbidden_file_type_list = ['jpg','png','jpeg','bmp','js','jsp','py']
export default {
  name: 'CreateCluster',
//   props: {
//     msg: String
//   }
    data() {
        return {
            clusterForm: {
                cluster_name: '',
                file: null,
                cluster_type: '',
            },
            cluster_type_list: [
                '私有云',
                'Rancher',
                '阿里云',
                '亚马逊云',
                '华为云',
                '腾讯云',
                'Azure云',
                '靑云',
            ],
            file_path: '',
            rules: {
                cluster_name: [
                    {required: true,message:'请输入集群名称',trigger: 'blur'}
                ],
                cluster_type: [
                    {required: true,message: '请选择集群类型', trigger: 'blur'}
                ]
            },
            fileCheckPass: true,
        };
    },
    methods: {
        // 文件上传格式错误
        // handleFormatError (file) {
        //     this.$Notice.warning({
        //         title: 'The file format is incorrect',
        //         desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
        //     });
        // },
        // 文件大小错误
        // handleMaxSize (file) {
        //     this.$Notice.warning({
        //         title: 'Exceeding file size limit',
        //         desc: 'File  ' + file.name + ' is too large, no more than 2KB.'
        //     });
        //     this.fileCheckPass = false
        // },

        handleUpload (file) {
            console.log(this.fileCheckPass)
            this.clusterForm.file=file;
            console.log(file)
            // console.log(file.type) 应该通过这个MIMI类型去进行判断
            const FileExt = file.name.replace(/.+\./, "").toLowerCase();//取得文件的后缀名
            console.log(FileExt)
            // console.log(file.size)
            // console.log(forbidden_file_type_list.indexOf(FileExt))
            if(forbidden_file_type_list.indexOf(FileExt) != -1){
                console.log("1")
                this.$Message.error(file.name + '文件格式不允许为'+JSON.stringify(forbidden_file_type_list))
                this.file = null //超过大小将文件清空
                this.fileCheckPass = false
                return false;
            }
            if (file.size > 102400) {
                //限制文件的大小
                console.log("2")
                this.$Message.error(file.name + '大小超过10kB!')
                this.file = null //超过大小将文件清空
                this.fileCheckPass = false
                return false;
            } 

            // 这里是false 则文件处理函数失效了
            return false;
        },

        create_cluster(name) {
            console.log(name)
            if(this.fileCheckPass){
                let formData = new FormData();
                formData.append('cluster_config',this.clusterForm.file)
                formData.append('cluster_name',this.clusterForm.cluster_name)
                formData.append('cluster_type',this.clusterForm.cluster_type)
                axios({
                    method: 'post',
                    url: cluster_create,
                    data: formData,
                    headers: {
                        'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
                    }
                }).then( (response) => {
                    if(response.data.msg == 'ok') {
                        let upload_file_path = response.data.file_path;
                        this.file_path = upload_file_path
                    }else {
                        this.$Message('创建集群失败')
                    }
                })
            }else{
                console.log(4)
                this.$Message.error('文件大小或者格式不对')
                return
            }


        }
    },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
